<template>
	<view class="Post" v-if="leibie.length>0">
		<u-picker :show="show1" :columns="leibie" keyName="name" @confirm="show1confirm" @cancel="cancel"></u-picker>
		<view class="title">
			<u--input placeholder="请输入 留言\投诉 标题" border="none" v-model="form.title" maxlength="22"
				class="input-title"></u--input>
		</view>
		<view class="textarea">
			<u--textarea v-model="form.content" placeholder="请输入 留言\投诉 内容" height="160" border="false"
				:placeholderStyle="placeholderStyle" :count="true" :maxlength="1000"></u--textarea>
		</view>
		<view class="upload">
			<u-upload name="1" multiple :maxCount="10" @afterRead="afterRead" :fileList="fileList1"></u-upload>
		</view>
		<view class="category">
			<view class="category-item">
				<view class="category-item-lable">留言类别：</view>
				<view class="category-item-value">
					<view class="plcheck" @click="show1 = true">{{leibieText}}<i
							class="iconfont icon-xiangyoujiantou" /></view>
				</view>
			</view>
			<view class="category-item">
				<view class="category-item-lable">留言领域：</view>
				<view class="category-item-value">
					<view class="plcheck" @click="lingyu">{{lingyuText}}<i class="iconfont icon-xiangyoujiantou" />
					</view>
				</view>
			</view>
			<view class="category-item" @click="chaosong">
				<view class="category-item-lable">抄送单位：</view>
				<view class="category-item-value">
					<view class="plcheck">{{ChaosongText}}<i class="iconfont icon-xiangyoujiantou" /></view>
				</view>
			</view>
		</view>
		<view class="form-other">
			<u-alert title="个人信息" type="warning" effect="dark" :description="description" :closable="true"></u-alert>
			<view class="form-lable flex">
				<view class="form-lable-title">向有关办理机构公开手机</view>
				<view class="form-lable-value"><u-switch v-model="form.switch" size="32"></u-switch>
					<view class="phone">18683626865</view>
				</view>
			</view>
			<view class="form-lable flex">
				<view class="form-lable-title">事发地</view>
				<view class="form-lable-value" style="width:calc(100% - 150rpx);justify-content: space-between;">
					<view class="mninput" @click="mapWechat">{{address}}<i class="iconfont icon-xiangyoujiantou"></i>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="postBtn" @click="postBtn" v-if="!postBtnclick">立即发布</view>
			<view class="postBtn " v-else>
				<view style="position: relative;z-index: 100;">正在发布...</view>
				<view class="postLoading"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {

		getLb,
		doPostHttp
	} from '@/api/api.js';
	export default {

		data() {
			return {
				show1: false,
				description: "为了尽快协助您解决诉求建议，请您根据《网络安全法》要求如实填写以下信息。您填写的联系方式仅供工作人员及留言办理单位反馈办理结果，他人无权浏览。关于隐私保护的具体条款可参阅：个人-服务协议-隐私保护。",
				form: {
					title: "",
					content: "",
					switch: true,
				},
				imgList: [],
				fileList1: [],
				ChaosongText: '请选择',
				ChaosongCid: 0,
				leibie: [],
				checkleibie: 0,
				checklingyu: 0,
				leibieText: "请选择",
				lingyuText: "请选择",
				onloadData: [],
				address: '选填',
				postBtnclick: false,
				placeholderStyle: "fontWeigth:blod"
			}
		},
		onLoad(options) {
			if (!options.id) {
				uni.navigateBack({
					delta: 2
				})
				return false
			}
			this.onloadData = options
		},
		onShow() {
			if (!this.hasLogin) {
				uni.navigateTo({
					url: "/pages/user/login"
				})
			} else {
				this.getLb()
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {
			chaosong() {
				uni.navigateTo({
					url: "/pages/post/city"
				})
			},
			postBtn() {
				
				let doPost = this.form;
				doPost.is_zhanshi = this.form.switch === true ? 1 : 2;
				doPost.leibie = this.checkleibie;
				doPost.lingyu = this.checklingyu;
				doPost.imgList = this.imgList;
				doPost.leaType = this.onloadData.type;
				doPost.leaValue = this.onloadData.id;
				doPost.ChaosongCid = this.ChaosongCid;
				for(let i in doPost){
					if(!doPost[i] || doPost[i]=='underfind'){
						uni.$u.toast('请完善输入项'+i);
						return false;
					}
				}
				this.postBtnclick = true;
				doPostHttp(doPost).then(r => {
                    if(r.data.code==200){
						uni.redirectTo({
								url: '/pages/post/success?wid=' + r.data.wid
							})
					}else{
						this.postBtnclick = false;
						uni.$u.toast(r.data.data);
						return false;
					}
				})
			},
			lingyu() {
				uni.navigateTo({
					url: "/pages/post/checklingyu"
				})
			},
			backUpdatePages(data) {
				this.checklingyu = data.id
				this.lingyuText = data.name
			},
			backChaosongPage(data) {
				let newChaosongText = data.city.c_name
				if (data?.qu?.cid) {
					newChaosongText = newChaosongText + ' - ' + data.qu.c_name
					this.ChaosongCid = data.qu.cid
				}
				this.ChaosongText = newChaosongText
			},
			show1confirm(e) {
				this.checkleibie = e.value[0].id
				this.leibieText = e.value[0].name
				this.show1 = false
			},
			cancel() {
				this.show1 = false
			},
			getLb() {
				let _this = this
				getLb({
					type_id: this.onloadData.id
				}).then(r => {
					if (r.data.code == 200) {
						_this.leibie = r.data.data
						if(r.data.cityData){
						   this.ChaosongCid = r.data.cityData.q.cid
						   this.ChaosongText = r.data.cityData.s.c_name +' - '+r.data.cityData.q.c_name
						}
					}
				})
			},
			handerChooseLocation() {
				let _this = this;
				uni.getLocation({
					complete(r) {
						if (r.errMsg == 'getLocation:ok') {
							uni.setStorageSync('latitude', r.latitude)
							uni.setStorageSync('longitude', r.longitude)
							uni.chooseLocation({
								latitude: r.latitude || uni.getStorageSync('latitude'),
								longitude: r.longitude || uni.getStorageSync('longitude'),
								success: (res) => {
									_this.address = res.address
								},

							})
						}
					}
				})
			},
			handleOpenSetting() {
				uni.openSetting({
					success: (res) => {
						if (res.authSetting["scope.userLocation"]) {
							this.handerChooseLocation()
						}
					}
				})
			},
			mapWechat() {
				this.handerChooseLocation()
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				let _this = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://wz.mala.cn/jsonApi/imgUpload',
						filePath: url,
						name: 'file',
						success: (res) => {
							let result = JSON.parse(res.data);
							if (result.code == 200) {
								_this.imgList.push(result.data)
							}
							resolve(result.data)
						}
					});
				})
			},
		}
	}
</script>
<style>
	.u-textarea__count {
		position: absolute !important;
		bottom: -80px !important;
	}

	.Post .title input {
		border-bottom: 1px solid #eee;
		font-size: 40rpx !important;
		color: #333;
		font-weight: bold;
		padding: 30rpx 20rpx;
	}

	.Post .textarea textarea {
		color: #000 !important;
		font-size: 36rpx !important;
		line-height: 40rpx;
		position: relative;
	}

	.placeholderClass {
		font-weight: bold;
	}
</style>
<style lang="scss" scoped>
	@keyframes loadingBtnAtn {
		0% {
			width: 0%;
		}

		50% {
			width: 50%;
		}

		100% {
			width: 100%;
		}
	}

	.postBtn {
		margin: 60rpx 0;
		background-color: $base-color;
		color: #fff;
		text-align: center;
		height: 160rpx;
		font-size: 38rpx;
		line-height: 160rpx;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		position: relative;

		.postLoading {
			position: absolute;
			content: "";
			bottom: 0;
			z-index: 99;
			left: 0;
			height: 160rpx;
			background-color: #5093f7;
			animation: loadingBtnAtn 2s linear infinite;
		}
	}

	.category {
		margin: 0 30rpx;
		margin-top: 10rpx;
		border-radius: 20rpx;

		background-color: #f8f8f8;

		&-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx;
			width: calc(100% - 80rpx);
			border-top: 1px solid #eee;

			&:first-child {
				border-top: 0 !important;
			}

			&-lable {
				color: #999;
				font-size: 32rpx;
			}

			&-value {
				.plcheck {
					align-items: center;
					color: #999;
					display: flex;
				}
			}
		}
	}

	.mninput {
		display: flex;

		align-items: center;
		font-size: 28rpx;
		justify-content: flex-end;
		color: #999;

		.iconfont {
			font-size: 36rpx;
			margin-left: 10rpx;
		}
	}

	.Post {
		.upload {
			padding: 0 30rpx;

		}

		.form-other {
			border-top: 1px solid #eee;
			padding: 30rpx;
			margin-top: 30rpx;

			.form-lable {
				padding: 30rpx 0;
				border-bottom: 1px solid #eee;

				&.flex {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.form-lable-value {
						text-align: right;

						.phone {
							font-size: 20rpx;
							color: #999;
							margin-top: 5rpx;
						}
					}
				}

				&-title {
					color: #333;
					font-size: 34rpx;
					padding-bottom: 15rpx;
				}
			}
		}
	}
</style>